<template>
  <!-- 这里的HTML结构会保留原样，JavaScript脚本将放到script标签内 -->
  <div>

  </div> <!-- 你可以在这里添加其他结构或样式 -->
</template>

<script setup>
import { onMounted } from 'vue';
import "https://g.alicdn.com/aliyun-documentation/web-chatbot-ui/0.0.24/index.js"

onMounted(() => {
  // 将原本的 JavaScript 逻辑嵌入到 Vue 组件的生命周期钩子中
  window.CHATBOT_CONFIG = {
    endpoint: "http://webchat-bot-wnoj.fcv3.1801877259722804.cn-hangzhou.fc.devsapp.net/chat", // 可以替换为 https://{your-fc-http-trigger-domain}/chat
    displayByDefault: false, // 默认不显示 AI 助手对话框
    title: '机器人指南', // 自定义 AI 助手标题
    draggable: true, // 是否开启拖拽
    aiChatOptions: { // 自定义取值参考：https://docs.nlkit.com/nlux/reference/ui/ai-chat#conversation-options
      conversationOptions: { // 自定义取值参考：https://docs.nlkit.com/nlux/reference/ui/ai-chat#conversation-options
        conversationStarters: [
          { prompt: '机器人产品分类' },
          { prompt: '介绍下机器人产品？' },
          { prompt: '有人形机器人吗?' },
        ],
      },
      displayOptions: { // 自定义取值参考：https://docs.nlkit.com/nlux/reference/ui/ai-chat#display-options
        height: 400,
        width: 300,
        right: 30,

      },
      personaOptions: { // 自定义取值参考：https://docs.nlkit.com/nlux/reference/ui/ai-chat#chat-personas
        assistant: {
          name: 'AI 助手',
          avatar: 'https://img.alicdn.com/imgextra/i2/O1CN01Pda9nq1YDV0mnZ31H_!!6000000003025-54-tps-120-120.apng',
          tagline: '您可以尝试点击下方的快捷入口开启体验！',
        },
      },
      messageOptions: { // 自定义取值参考：https://docs.nlkit.com/nlux/reference/ui/ai-chat#message-options
        waitTimeBeforeStreamCompletion: 'never',
      },
    },
    dataProcessor: {
      /**
       * 在向后端大模型应用发起请求前改写 Prompt。
       * 比如可以用于总结网页场景，在发送前将网页内容包含在内，同时避免在前端显示这些内容。
       * @param {string} prompt - 用户输入的 Prompt
       * @param {string} - 改写后的 Prompt
       */
      rewritePrompt(prompt) {
        return prompt;
      },
    },
  };
});
</script>

<style scoped>
@import 'http://maxai.tingfengcloud.cn/src/assets/css/web-chatbot-ui/index.css';
/* webchat 工具栏的颜色 */
:root {
  --webchat-toolbar-background-color: #1464E4;
  --webchat-toolbar-text-color: #FFF;

}
/* webchat 对话框如果被遮挡，可以尝试通过 z-index、bottom、right 等设置 来调整*/
.webchat-container {
  z-index: 100;
  bottom: 100px;
  right: 100px;
}

/* webchat 的唤起按钮如果被遮挡，可以尝试通过 z-index、bottom、right 等设置 来调整。也可以通过 CSS 进一步定制唤起按钮的形状、大小等。 */
.webchat-bubble-tip {
  z-index: 1000;
  bottom: 50px;
  right: 100px;
}
</style>

